<template>
    <div class="block">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        ></el-pagination>
    </div>
</template>

<script>
    export default {
        name: "el-page",
        props: {
            currentPage: Number,
            total : Number,
            pageSizes : Array,
            pageSize : Number,
            required: true
        },
        data() {
            return {
                childCurrentPage: this.currentPage,
                childTotal : this.total,
                childPageSizes : this.pageSizes,
                childPageSize : this.pageSize,
            }
        },
        computed:{

        },
        methods: {
            getData() {
                this.$emit('getData', {
                    rows : this.childPageSize,
                    page : this.childCurrentPage
                });
            },
            handleSizeChange(val) {
                // console.log(`每页 ${val} 条`);
                this.childPageSize = val;
                this.getData();
            },
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                this.childCurrentPage = val;
                this.getData();
            },
        },
        created() {
            this.getData();
        }
    }
</script>

<style scoped>

    .block{
        margin: 10px 0;
        text-align: left;
    }

</style>
